<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
            <el-form-item label="申请时间" prop="startTime">
                <el-date-picker clearable format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" style="width: 200px" v-model="queryParams.startTime" type="date" placeholder="选择申请时间"> </el-date-picker>
            </el-form-item>
            <el-form-item label="企业名称" prop="companyName">
                <el-input v-model="queryParams.companyName" placeholder="请输入企业名称" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="签约状态" prop="signStatus">
                <el-select v-model="queryParams.signStatus" placeholder="操作类型" clearable size="small" style="width: 240px">
                    <el-option v-for="dict in sign_status" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                </el-select>
            </el-form-item>
            <!--<el-form-item label="所在省" prop="addressProvice">
        <el-input
          v-model="queryParams.addressProvice"
          placeholder="请输入所在省"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所在市" prop="addressCity">
        <el-input
          v-model="queryParams.addressCity"
          placeholder="请输入所在市"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所在区" prop="addressArea">
        <el-input
          v-model="queryParams.addressArea"
          placeholder="请输入所在区"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input
          v-model="queryParams.address"
          placeholder="请输入详细地址"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>-->
            <el-form-item label="联系人姓名" prop="contactPerson" label-width="100">
                <el-input v-model="queryParams.contactPerson" placeholder="请输入联系人姓名" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="联系人手机号" prop="contactPhone" label-width="100">
                <el-input v-model="queryParams.contactPhone" placeholder="请输入联系人手机号" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="userinfoList">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="企业ID" align="center" prop="uid" />
            <el-table-column label="企业名称" align="center" prop="companyName" />
            <!-- <el-table-column label="详细地址" align="center" prop="address" /> -->
            <el-table-column label="联系人" align="center" prop="contactPerson" />
            <el-table-column label="联系方式" align="center" prop="contactPhone" />
            <el-table-column label="公司邮箱" align="center" prop="contactEmail" />
            <el-table-column label="申请时间" align="center" prop="applyTime" />
            <el-table-column label="签约状态" align="center" prop="signStatus" :formatter="statusFormat" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['biz:userinfo:edit']">
                        <span v-if="scope.row.signStatus == '0'">
                            去签约
                        </span>
                        <span v-if="scope.row.signStatus == '1'">
                            已签约
                        </span>
                        <span v-if="scope.row.signStatus == '2'">
                            签约中
                        </span>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改用户详情对话框 -->
        <el-dialog :title="title" d :visible.sync="open" width="500px" append-to-body @close="closeDialog">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker clearable size="small" style="width: 200px" v-model="form.startTime" type="date" format="yyyy-MM-dd hh:mm:ss" value-format="yyyy-MM-dd hh:mm:ss" placeholder="选择开始时间" :disabled="rows.signStatus == '1'"> </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker clearable size="small" style="width: 200px" v-model="form.endTime" type="date" format="yyyy-MM-dd hh:mm:ss" value-format="yyyy-MM-dd hh:mm:ss" placeholder="选择结束时间" :disabled="rows.signStatus == '1'"> </el-date-picker>
                </el-form-item>
                <el-form-item label="是否授信" prop="setType">
                    <el-select v-model="form.setType" placeholder="请选择状态" :disabled="rows.signStatus == '1'">
                        <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="上传" prop="dealFile" :disabled="rows.signStatus == '1'">
                    <el-upload ref="dealFile" limit="1" :file-list="form.dealFile" :action="uploadImgUrl" :headers="headers" :on-success="handleSuccess" :before-upload="fieldBeforeUpload">
                        <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-button type="primary" @click="signsbmit">提 交</el-button>
                <el-button @click="cancel">取 消</el-button>

                <!--   <el-button type="primary" @click="signsbmit">提 交</el-button>
                <el-button @click="cancel">取 消</el-button>-->
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="show"></div>
        </el-dialog>
    </div>
</template>

<script>
import { listUserinfo2, getUserinfo, delUserinfo, addUserinfo, updateUserinfo, exportUserinfo } from '@/api/biz/userinfo';
import { getToken } from '@/utils/auth';
export default {
    name: 'qUserinfo',
    data() {
        //定义校验规则
        let validateFileUrl = (rule, value, callback) => {
            if (this.$refs.dealFile.uploadFiles.length < 1) {
                callback(new Error('请上传文件'));
            } else {
                callback();
            }
        };
        return {
            rows: '',
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            readonly: false,
            // 总条数
            total: 0,
            // 用户详情表格数据
            userinfoList: [],
            sign_status: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,

            fileList: [],
            typeoptions: [
                {
                    value: '1',
                    label: '是'
                },
                {
                    value: '0',
                    label: '否'
                }
            ],

            show: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                uid: undefined,
                companyName: undefined,
                addressProvice: undefined,
                addressCity: undefined,
                addressArea: undefined,
                address: undefined,
                contactPerson: undefined,
                contactPhone: undefined,
                contactEmail: undefined,
                legalPerson: undefined,
                legalPhone: undefined,
                legalIdcard: undefined,
                legalIdcardFile: undefined,
                legalOperateFile: undefined,
                businessScope: undefined,
                operatingStartTime: undefined,
                operatingEndTime: undefined,
                companyCode: undefined,
                companyWeb: undefined,
                companyPhone: undefined,
                companyIntro: undefined,
                quota: undefined,
                quotaStartTime: undefined,
                quotaEndTime: undefined,
                deposit: undefined,
                applyStatus: '', // 认证 2.通过3.不通过
                createdTime: ''
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                startTime: [{ required: true, message: '请选择', trigger: 'blur' }],
                endTime: [{ required: true, message: '请选择', trigger: 'blur' }],
                setType: [{ required: true, message: '请选择', trigger: 'blur' }],
                dealFile: [
                    {
                        required: true,
                        validator: validateFileUrl,
                        trigger: ['change']
                    }
                ]
            },
            radio: '全部',
            uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
            headers: {
                Authorization: 'Bearer ' + getToken()
            },
            rows: ''
        };
    },
    created() {
        this.getList();
        this.getDicts('sign_status').then(response => {
            this.sign_status = response.data;
        });
    },
    filters: {
        change(msg) {
            return msg + 'xxxxx';
        }
    },
    methods: {
        onTabs() {
            switch (this.radio) {
                case '全部':
                    this.queryParams.applyStatus = '';
                    break;
                case '已签约':
                    this.queryParams.applyStatus = '2';
                    break;
                default:
                    this.queryParams.applyStatus = '3';
                    break;
            }
            this.getList();
        },

        // 操作日志状态字典翻译
        statusFormat(row, column) {
            return this.selectDictLabel(this.sign_status, row.signStatus);
        },

        fieldBeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 2;
            if (!isRightSize) {
                this.$message.error('文件大小超过 2MB');
            }

            if (this.fileList.length >= 2) {
                this.$message.error(`请上传有且仅有1个文件。`);
            }
            return isRightSize;
        },
        /** 查询用户详情列表 */
        getList() {
            this.loading = true;
            listUserinfo2(this.queryParams).then(response => {
                this.userinfoList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
            this.form.dealFile = [];
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                uid: undefined,
                companyName: undefined,
                addressProvice: undefined,
                addressCity: undefined,
                addressArea: undefined,
                address: undefined,
                contactPerson: undefined,
                contactPhone: undefined,
                contactEmail: undefined,
                legalPerson: undefined,
                legalPhone: undefined,
                legalIdcard: undefined,
                legalIdcardFile: undefined,
                legalOperateFile: undefined,
                businessScope: undefined,
                operatingStartTime: undefined,
                operatingEndTime: undefined,
                companyCode: undefined,
                companyWeb: undefined,
                companyPhone: undefined,
                companyIntro: undefined,
                quota: undefined,
                quotaStartTime: undefined,
                quotaEndTime: undefined,
                deposit: undefined
            };
            this.resetForm('form');
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm');
            this.handleQuery();
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.rows = row;
            const id = row.id || this.ids;
            if (row.signStatus == 1 || row.signStatus == 2) {
                return;
            }
            getUserinfo(id).then(response => {
                this.form = response.data[0];
                if (this.form.dealFile != null) {
                    var images = this.form.dealFile.split(',');
                    console.log(images);
                    var tmp = [];
                    images.forEach(item => {
                        if (item != '') {
                            tmp.push({
                                name: 'cdscs',
                                url: process.env.VUE_APP_BASE_API + item
                            });
                            this.fileList.push(item);
                        }
                    });
                    this.form.dealFile = tmp;
                }

                if (this.form.signStatus != 0) {
                    this.show = false;
                    this.title = '查看';
                } else {
                    this.title = '签约';
                    this.fileList = [];
                    this.form.dealFile = undefined;
                }
                this.open = true;

            });
        },

        /** 提交按钮 */
        signsbmit: function() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id != undefined) {
                        this.btnData('/web/signBtn', this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess('修改成功');
                                this.open = false;
                                this.getList();
                                this.form.dealFile = [];
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        handleSuccess(response) {
            if (response.code == 200) {
                this.form.dealFile = response.fileName;
                console.log(this.form);
            } else {
                this.form.dealFile = undefined;
                this.msgError(response.msg);
            }
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm('是否确认删除用户详情编号为"' + ids + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return delUserinfo(ids);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess('删除成功');
                })
                .catch(function() {});
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出用户详情数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return exportUserinfo(queryParams);
                })
                .then(response => {
                    this.download(response.msg);
                })
                .catch(function() {});
        },
        // 关闭弹窗
        closeDialog() {
            this.form.dealFile = [];
        }
    }
};
</script>
